<template>
  <div style="width:100vw;" class="home">
    <!-- <div class="home-header">
      <mt-header fixed title="员工职业发展管理系统"></mt-header>
    </div>-->
    <div class="home-body">
      <!-- <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      @top-status-change="handleTopChange"
      ref="loadmore"
      >-->
      <div class="bscroll" ref="bscroll">
        <div class="bscroll-container">
          <div v-show="loadingUp" style="padding:10px;text-align:center;">
            <mt-spinner type="snake"></mt-spinner>
          </div>
          <div v-if="homeImgList.length > 0" class="banner">
            <mt-swipe :auto="4000">
              <mt-swipe-item v-for="(item,index) in homeImgList" :key="index">
                <img :src="item.filePath" alt="banner1" />
              </mt-swipe-item>
            </mt-swipe>
          </div>
          <div v-else class="banner">
            <img src="@/assets/homePicture/banner1.jpg" alt="banner1" />
          </div>
          <div @click="goMessageList" class="notice-box">
            <div class="notice seeing row-flex">
              <div>
                <span class="icon-rectangle"></span>
                <span style="position:relative;top:-3px;">通知</span>
              </div>
              <span class="iconfont icongengduo"></span>
            </div>
            <div class="notice-msg row-flex">
              <span class="picture-box voice-icon">
                <img src="@/assets/homePicture/laba.png" alt="voice" />
              </span>
              <span class="notice-type">{{newMessage.title || '暂无'}}</span>
              <span class="notice-time">{{newMessage.msgTime}}</span>
            </div>
          </div>
          <div class="menu-box colum-flex">
            <ul style="flex-wrap:wrap;" class="item-box row-flex">
              <li @click="setParams(items.name)" v-for="items in list" :key="items.id" v-show="items.id != 6" class="item">
                <div class="colum-flex">
                  <span :style="{backgroundColor:items.bgcolor}" class="picture-box menu-size">
                    <img :src="require('@/assets/homePicture/'+items.picture+'.png')" />
                  </span>
                  <span>{{items.text}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="excellent-courses-box notice-box">
            <div @click="moreCourse" style="justify-content:space-between;" class="notice row-flex">
              <div>
                <span class="icon-rectangle"></span>
                <span style="position:relative;top:-2px;">精品课程</span>
              </div>
              <span class="iconfont icongengduo"></span>
            </div>
            <div class="excellent-courses">
              <div class="row-flex">
                <div
                  @click="goface(item.id,'homeface')"
                  v-for="(item,index) in goodClassList"
                  :key="index"
                  class="courses-card"
                  :style="index == 0 ? 'margin-right:0.3867rem;' : ''"
                >
                  <div
                    :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail1.jpg')});`"
                    class="img-box"
                  >
                    <!-- <img :src="require('@/assets/homePicture/detail5.jpg') || item.coursePhoto" alt /> -->
                  </div>
                  <div class="courses-tip">
                    <div style="overflow:hidden;">{{item.title}}</div>
                  </div>
                  <div class="user-msg row-flex">
                    <p>
                      <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                    </p>
                    <p>{{item.username}} · {{item.deptName}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="teacher-box notice-box">
            <div class="notice row-flex">
              <span class="icon-rectangle"></span>
              <span>讲师风采</span>
            </div>
            <div class="bscrollx" ref="bscrollx">
              <div style="width:20rem;" class="bscrollx-container">
                <div class="teacher-card clearfix">
                  <div
                    @click="goodClass(item.id)"
                    v-for="(item,index) in goodTeaList"
                    :key="index"
                    :style="`${index == 0  ? 'background-color:rgb(246, 200, 202) !important;' : index == 2 || index==5 ? 'background-color:rgb(245, 219, 194) !important;' : index == 4  ? 'background-color:rgb(246, 200, 202) !important;' : ''}`"
                    class="teacher-item row-flex"
                  >
                    <div
                      :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`"
                      class="teacher-picture"
                    >
                      <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    </div>
                    <div>
                      <p
                        style="width:1.2rem;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;"
                        class="teacher-name"
                      >{{item.username}}</p>
                      <p
                        style="width:1.2rem;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;"
                        class="detail"
                      >{{item.deptName}}</p>
                    </div>
                  </div>
                  <!-- <div class="teacher-pink-item row-flex" style="background-color: #FFF5DBC2">
                    <div class="teacher-picture">
                      <img src="@/assets/homePicture/userpicture.png" alt />
                    </div>
                    <div>
                      <p class="teacher-name">李亚辉</p>
                      <p class="detail">履带底盘公司</p>
                    </div>
                  </div>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'loading'">Loading...</span>
      </div>
      </mt-loadmore>-->
    </div>
    <div class="home-footer">
      <mt-tabbar fixed v-model="selected">
        <mt-tab-item id="Home">
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon icontianchongxing-"></div>
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png"  v-if="this.selected == 'Home'"/> -->
          首页
        </mt-tab-item>
        <mt-tab-item id="StudyCenter">
          <!-- <img slot="icon" src="@/assets/homePicture/home2.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconwenti-shuben"></div>学习
        </mt-tab-item>
        <mt-tab-item id="Growup">
          <!-- <img slot="icon" src="@/assets/homePicture/home3.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconxinfeng2"></div>成长
        </mt-tab-item>
        <mt-tab-item id="Things">
          <!-- <img slot="icon" src="@/assets/homePicture/home4.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconrili"></div>办事
        </mt-tab-item>
        <mt-tab-item id="TalentIntroduce">
          <div slot="icon" class="iconfont home-tab-icon iconweibiaoti--"></div>优才
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
import { setTimeout } from "timers";
// import * as dd from 'dingtalk-jsapi';
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
import { Indicator, Toast } from "mint-ui";
export default {
  name: "Home",
  props: ["number"],
  data() {
    return {
      marginRight: "margin-right",
      loadingUp:'',
      selected: "Home",
      msg: "xffya",
      bgcolor: "#4BDBFF",
      allLoaded: "",
      topStatus: "",
      homeImgList: [],
      newMessage: {
        title: "",
        msgTime: ""
      },
      list: [
        {
          id: 1,
          picture: "menu-hat",
          text: "优才引荐",
          bgcolor: "#4BDBFF",
          name: "talentIntroduce"
        },
        {
          id: 2,
          picture: "menu-email",
          text: "成长档案",
          bgcolor: "#FF535A",
          name: "growup"
        },
        {
          id: 3,
          picture: "menu-book",
          text: "学习中心",
          bgcolor: "#FD9535",
          name: "studyCenter"
        },
        {
          id: 4,
          picture: "menu-date",
          text: "办事指南",
          bgcolor: "#9F8FBC",
          name: "things"
        },
        {
          id: 5,
          picture: "menu-men",
          text: "人事制度",
          bgcolor: "#FFCB41",
          name: "peopleRules"
        },
        {
          id: 6,
          picture: "menu-up",
          text: "薪酬绩效",
          bgcolor: "#FF5799",
          name: "thingss"
        },
        {
          id: 7,
          picture: "menu-callmen",
          text: "课程中心",
          bgcolor: "#2B84CF",
          name: "classCenter"
        },
        {
          id: 8,
          picture: "menu-more",
          text: "更多服务",
          bgcolor: "#2CDB88",
          name: "more"
        }
      ],
      goodClassList: [],
      goodTeaList: []
    };
  },
  mounted() {
    let roles = JSON.parse(localStorage.getItem("role"));
    console.log("home页面:" + roles);
    if (roles) {
      this.roles = roles.points;
      // 消息列表
      let params = {
        isRead: 0
      };
      this.$get("message", params).then(res => {
        if (res.success) {
          if (res.data) {
            this.newMessage = res.data;
          }
          console.log("获取消息成功");
        }
      });
      // 获取精品课程
      this.$get("getGoodCourses").then(res => {
        if (res.success) {
          if (res.data) {
            this.goodClassList = res.data.goodCourseList.splice(0, 2);
          }
          console.log("获取精品课程成功");
        }
      });

      // 获取讲师风采
      this.$get("qryGoodTea").then(res => {
        if (res.success) {
          if (res.data) {
            this.goodTeaList = res.data.teaSimpleList.splice(0, 6);
          }
        }
      });
    } else {
      console.warn("获取权限失败");
    }
    // 获取讲师风采
    this.$get("qryImageManageList").then(res => {
      if (res.success) {
        if (res.data) {
          this.homeImgList = res.data;
        }
      }
    });
    setText("首页");
    this.initScroll('bscroll');
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscrollx;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true,
        scrollX: true,
        scrollY: false
      });
    });
  },
  watch: {
    selected(before, after) {
      this.$router.push({
        path: before,
        query: { dd_nav_bgcolor: "FFFE5824" }
      });
    }
  },
  methods: {
    pageRefresh() {
      let params = {
        isRead: 0
      };
      this.$get("message", params).then(res => {
        if (res.success) {
          if (res.data) {
            this.newMessage = res.data;
          }
          console.log("获取消息成功");
        }
      });
      // 获取精品课程
      this.$get("getGoodCourses").then(res => {
        if (res.success) {
          if (res.data) {
            this.goodClassList = res.data.goodCourseList.splice(0, 2);
          }
          console.log("获取精品课程成功");
        }
      });

      // 获取讲师风采
      this.$get("qryGoodTea").then(res => {
        if (res.success) {
          if (res.data) {
            this.goodTeaList = res.data.teaSimpleList.splice(0, 6);
          }
        }
      });
      // 获取讲师风采
      this.$get("qryImageManageList").then(res => {
        if (res.success) {
          if (res.data) {
            this.homeImgList = res.data;
          }
          this.loadingUp = false;
        }
      });
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullDownRefresh: {
            threshold: 20, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        bScroll.on("pullingDown", () => {
          that.loadingUp = true;
          setTimeout(() => {
            that.pageRefresh();
          }, 1000);
          bScroll.finishPullDown();
        });
        bScroll.refresh();
      });
    },
    goMessageList() {
      this.$router.push({ path: "/messageList" });
    },
    moreCourse() {
      this.$router.push({ path: "/goodCourse" });
    },
    goface(id, homeface) {
      this.$router.push({ path: "/faceClass", query: { id, type: homeface } });
    },
    goodClass(id) {
      this.$router.push({
        path: "/myTeacherDetail",
        query: { id, status: false }
      });
    },
    setParams(e) {
      if (e == "thingss") {
        Toast({
          className: "z-index",
          message: "敬请期待",
          duration: 2000
        });
        return;
      }
      this.$router.push({ path: e });
      // this.$store.commit("setRouterName", e);
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    // console.log(to, from);
    next();
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/home.less");
.seeing {
  justify-content: space-between;
}
.home-tab-icon {
  padding-top: 2px !important;
}
.bscroll-container {
  padding-bottom: 55px;
}
.bscrollx {
  width: 100vw;
}
</style>

